<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生各科、总分年级排名</title>
    <script type="text/javascript" src="/classteacher/js/jquery-3.5.0.js"></script>
    <link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
    <script src="../bootstrap/popper.min.js"></script>
    <script src="../bootstrap/bootstrap.min.js"></script>
    <script src="/classteacher/Vue/Vue.js"></script>
    <script src="/classteacher/Vue/axios.js"></script>
    <script src="layui/layer/layer.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<style>
    body {
        background-color: rgba(192, 192, 192, 0.3);
    }
</style>
<body>
<div id="app" class="container">
    <br>
    <h3>学生排名分布</h3>

    <br>
    <div>
        <span>班级：</span>
        <select v-model="classId">
            <option value="0" selected="selected">请选择班级</option>
            <option v-for="c in classs" :value="c.teId">{{c.tname}}</option>
        </select>
    </div>
    <br><br>
    <div>
        <span>考试：</span>
        <select v-model="paperName">
            <option value="0" selected="selected">请选择一项考试</option>
            <option v-for="n in paperNums" :value="n">{{n}}</option>
        </select>
    </div>
    <br>
    <div>
        <button class="btn btn-info " @click="inquiry">查询</button>
    </div>
    <br>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 700px;height:400px;"></div>
</div>
</body>
<script>
    //牟强

    let refreshToken = localStorage.getItem("refreshToken");
    let token = localStorage.getItem("token");
    new Vue({
        el: "#app",
        data: {
            paperNums: [],
            classs: [],
            paperName: 0,
            classId: 0,
            subject: 10
        },
        mounted() {
            axios.get("initAnalyze", {
                headers: {
                    "token": token,
                    "refreshToken": refreshToken
                }
            }).then(res => {
                console.log(res.data);
                if (res.data.code == 0) {
                    this.paperNums = res.data.data.paperNames;
                    console.log(this.paperNums);
                    this.classs = res.data.data.teamInfos;
                    console.log(this.classs);
                    if (res.headers.token != null) {
                        //更新本地token
                        localStorage.setItem("token", res.headers.token);
                    }
                }
            });
        },
        methods: {
            inquiry: function () {
                let sub = this.subject;
                let paperName = this.paperName;
                let classId = this.classId;
                console.log(sub);
                console.log(paperName);
                console.log(classId);
                let params = new URLSearchParams();
                params.append("teamId", classId);
                params.append("gradeName", paperName);
                axios.get("acquireData?subjectId=" + sub + "&teamId=" + classId + "&gradeName=" + paperName, {
                    headers: {
                        "token": token,
                        "refreshToken": refreshToken
                    }
                }).then(res => {
                    let data = null;
                    console.log(res.data);
                    data = res.data.data;
                    console.log(data);
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '学生总分排名'
                        },
                        tooltip: {},
                        legend: {
                            data: ['人数']
                        },
                        xAxis: {
                            data: ["0-10%", "10-20%", "20-30%", "30-40%", "40-50%", "50-60%", "60-70%", "70-80%", "80-90%", "90-100%"],
                            axisLabel: {//坐标轴刻度标签的相关设置。
                                interval: 0
                            }
                        },
                        yAxis: {},
                        series: [{
                            name: '本班占范围人数',
                            type: 'bar',
                            data: [data.ten, data.twenty, data.thirty, data.forty, data.fifty, data.sixty, data.seventy, data.eighty, data.ninety, data.hundred],
                            //配置样式
                            itemStyle: {
                                normal: {
                                    //每个柱子的颜色
                                    color: function (params) {
                                        var colorList = ['green', 'green', 'green', 'green', 'green', 'green', 'green', 'green', 'red', 'red']
                                        return colorList[params.dataIndex];
                                    }
                                }
                            }
                        }]
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                })
            }
        }
    })
</script>
</html>